<template>
  <div>
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="width: 100%; text-align: left; margin-left: 30px"
    >
      <el-form-item>
        <el-input
          placeholder="请输入公司名称"
          v-model="keyWord"
          style="width: 500px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()" round>查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addCompany()" round
          >增加用户</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="CusInfoList"
      border
      tooltip-effect="dark"
      style="width: 98%; margin: 0px auto"
    >
      <!-- 多选框列 
     prop:指定该列要显示的数据属性
     -->
      <el-table-column type="selection" width="55" prop="com_id" v-if="false">
      </el-table-column>

      <el-table-column prop="com_name" label="公司名称" width="120">
      </el-table-column>
      <el-table-column prop="com_addr" label="公司地址" width="120">
      </el-table-column>
      <el-table-column prop="com_credit" label="公司信用度" width="120">
      </el-table-column>
      <el-table-column prop="com_satisfaction" label="客户满意度" width="120">
      </el-table-column>
      <el-table-column prop="com_legal" label="法人" width="120">
      </el-table-column>
      <el-table-column prop="com_license" label="营业执照" width="120">
      </el-table-column>
      <el-table-column prop="com_fund" label="注册资金" width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 编辑 -->
          <el-button
            size="mini"
            icon="el-icon-edit"
            circle
            @click="updCom(scope.row)"
          ></el-button>
          <!-- 删除 -->
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delCom(scope.row)"
          ></el-button>
          <el-button
            size="mini"
            type="success"
            round
            @click="selCliOfCom(scope.row)"
            >查看联系人</el-button
          >
          <el-button
            size="mini"
            type="success"
            round
            @click="selAssInfo(scope.row)"
            >交往记录</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改模态框开始 -->
    <el-dialog title="编辑公司信息" :visible.sync="updComInfoFormVisible">
      <el-form :inline="true" :rules="rules" :model="updCompanyInfo" ref="comform">
        <el-row>
          <el-col :span="24">
            <el-form-item label="公司名称"  prop="com_name">
              <el-input
                type="text"
                v-model="updCompanyInfo.com_name"
                style="width: 100%"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司电话"  prop="com_tel">
              <el-input type="text" v-model="updCompanyInfo.com_tel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="公司地址"  prop="com_addr">
          <el-input type="text" v-model="updCompanyInfo.com_addr"></el-input>
        </el-form-item>

        <el-form-item label="公司法人"  prop="com_legal">
          <el-input type="text" v-model="updCompanyInfo.com_legal" ></el-input>
        </el-form-item>
        <el-form-item label="营业执照"  prop="com_license">
          <el-input type="text" v-model="updCompanyInfo.com_license"></el-input>
        </el-form-item>
        <el-form-item label="公司注册资金" prop="com_fund">
          <el-input type="text" v-model="updCompanyInfo.com_fund"></el-input>
        </el-form-item>

        <el-form-item label="客户满意度">
          <el-rate v-model="updCompanyInfo.com_satisfaction"></el-rate>
          <!-- <el-input
            type="text"
            v-model="updCompanyInfo.com_satisfaction"
          ></el-input> -->
        </el-form-item>

        <el-form-item label="客户信用度" >
          <el-rate v-model="updCompanyInfo.com_credit"></el-rate>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updComInfoFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save('comform')">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 增加模态框结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyWord: "",
      saveFlag: "",
      CusInfoList: [],
      updCompanyInfo: {
        com_id: "",
        com_addr: "",
        com_tel: "",
        com_status: "",
        com_satisfaction: "",
        com_credit: "",
        com_legal: "",
        com_license: "",
        com_fund: "",
        com_name: "",
      },
      //验证规则
      rules:{
        com_name:[
          {
            required:true,
            message:'不能为空', 
            trigger:'blur'
          },
          
        ],
        com_tel:[{required:true,message:'请输入11位电话号码',trigger:'blur'},{len:11,message:'电话号码长度不符',trigger:"blur"}],
        com_addr:[{required:true,message:'地址不能为空',trigger:'blur'}],
        com_legal:[{required:true,message:'法人不能为空',trigger:'blur'}],
        com_license:[{required:true,message:'营业执照不能为空',trigger:'blur'}],
        com_fund:[{required:true,message:'注册资金不能为空',trigger:'blur'}]
      },
      // 增加用户模态框
      updComInfoFormVisible: false,
    };
  },

  methods: {
    LoadCusInfo() {
      this.$axios
        .get("/companies")
        .then((res) => {
          this.CusInfoList = res.data.data;
        })
        .catch((error) => {});
    },
    //点击修改按钮方法
    updCom(a) {
      this.saveFlag = 1; //1代表当前为修改
      this.$axios
        .get("/companies/" + a.com_id)
        .then((res) => {
          this.updCompanyInfo = res.data.data;
          this.updComInfoFormVisible = true;
        })
        .catch((error) => {});
    },
    //新增按钮方法
    addCompany() {
      this.updCompanyInfo.com_id = "";
      this.updCompanyInfo.com_addr = "";
      this.updCompanyInfo.com_tel = "";
      this.updCompanyInfo.com_status = "";
      this.updCompanyInfo.com_satisfaction = "";
      this.updCompanyInfo.com_credit = "";
      this.updCompanyInfo.com_legal = "";
      this.updCompanyInfo.com_license = "";
      this.updCompanyInfo.com_fund = "";
      this.updCompanyInfo.com_name = "";
      this.updComInfoFormVisible = true;
      this.saveFlag = "2"; //2代表当前为新增
    },
    //保存更改调用此方法
    saveUpdComInfo() {
      this.$axios
        .post("/companies", this.updCompanyInfo)
        .then((res) => {
          this.updComInfoFormVisible = false;
          this.LoadCusInfo();
          this.ok();
        })
        .catch((error) => {
          this.no();
        });
    },
    //成功提示方法
    ok() {
       this.$message({
                type: "success",
                message: "保存成功!",
              });
    },
    //失败提示方法
    no() {
      this.$message({
                type: "info",
                message: "保存失败!",
              });
    },
    //保存新增调用此方法
    saveAddComInfo() {
      this.$axios
        .post("/companies/add", this.updCompanyInfo)
        .then((res) => {
          this.updComInfoFormVisible = false;
          this.LoadCusInfo();
          this.ok();
        })
        .catch((error) => {
          this.no();
        });
    },
    //查询公司联系人
    selCliOfCom(company) {
      this.$router.push("/Client/" + company.com_id);
    },
    //查询交往记录
    selAssInfo(company) {
      this.$router.push("/Associate/" + company.com_id);
    },
    /**
     * 保存：saveFlag=1，代表修改保存
     *      saveFlag=2，代表新增保存
     */
    save(comfrom) {
      //alert("222")
      if (this.saveFlag == "1") {
        //alert("33")
        this.$refs[comfrom].validate((valid)=>{
          if(valid){
            //alert("11")
            this.saveUpdComInfo();
          }else{
             console.log('error submit!!');
            return false;
          }
        })
        
      } else if (this.saveFlag == "2") {
        this.$refs[comfrom].validate((valid)=>{
          if(valid){
           this.saveAddComInfo();
          }else{
             console.log('error submit!!');
            return false;
          }
        })
      }
    },
    //删除按钮方法
    delCom(companyInfo) {
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("/companies/del/" + companyInfo.com_id)
            .then((res) => {
              this.LoadCusInfo();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //模糊查询方法
    search() {
      if(this.keyWord != ""){
        this.$axios
        .post("/companies/search/" + this.keyWord)
        .then((res) => {
          this.CusInfoList = res.data.data;
        })
        .catch((error) => {});
      }else{
        this.LoadCusInfo();
      }
      
    },
  },

  mounted() {
    this.LoadCusInfo();
  },
};
</script>